Async pipe

אם אנחנו רוצים להשתמש ב-service בכמה קומפוננטות, במקום להחזיק את הערך בנפרד בכל קומפוננטה, אחננו יכולים רק להסתכל על הערך שמוחזק לנו ב-service.

המשתנה counter$ הוא Observable.

count.service.ts

get counter$(): Observable<number> {
    return this.counterSubject.asObservable();
}

הוא לא משתנה אמיתי, אלא רק stream של מידע, לכן מסמנים אותו עם $.

app.component.ts

currentCount$: Observable<number>;

constructor(private countService: CountService){
    this.currentCount$ = this.countService.counter$;
}

בדף נשתמש ב-pipe async כדי להציג את הערך.

app.component.html

<h3>Current Count = {{ currentCount$ | async }}</h3>

ה-pipe עושה לנו הרשמה לערך של המשתנה כשהאלמנט עולה לדף ועושה אוטומטית unsubscribe כשהאלמנט יוצא מהדף.